<template>
  <div>
    <van-nav-bar
      :title="`讨论组 (${users.length})`"
      left-arrow
      @click-left="$router.back()"
      @click-right="goDetail"
    >
    </van-nav-bar>
    <div class="list pb-10">
      <div class="user-item" v-for="item in shortUser" :key="item.id">
        <img class="avatar" width="40" height="40" :src="item.avatar" alt="" />
        <div class="nickname fs-14">{{ item.nickname }}</div>
      </div>
      <div class="btn-more mt-20 mb-8">查看更多群成员 ></div>
    </div>
    <van-cell-group class="mt-10">
      <van-cell title="群名称" value="内容" />
      <van-cell title="群昵称" value="内容" />
      <van-cell title="群介绍" value="内容" />
    </van-cell-group>
    <div class="p-12 mt-20">
      <van-button type="primary" block>退出群聊</van-button>
    </div>
  </div>
</template>

<script>
import napi from '@/api/napi'
export default {
  data() {
    return {
      users: []
    }
  },
  computed: {
    shortUser() {
      return (this.users || []).splice(0, 8)
    }
  },
  mounted() {
    napi.getRoomUserList({ roomId: this.$route.params.roomId }).then(res => {
      this.users = res
    })
  },
  methods: {
    goDetail() {
      this.$router.push({
        name: 'room-detail',
        params: this.$route.params
      })
    }
  }
}
</script>

<style lang="less" scoped>
.list {
  background-color: #fff;
}
.user-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 25%;
  color: gray;
  .avatar {
    margin-top: 10px;
    border-radius: 4px;
  }
  .nickname {
    margin-top: 10px;
    font-size: 13px;
  }
}

.btn-more {
  color: gray;
  text-align: center;
}
</style>
